<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .error {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>员工信息录入</p>

    <form name="empForm" id="empForm" method="post" action="test.html">
      <table border="1">
        <tr>
          <td>真实姓名(不能为空 ,没有其他要求)</td>
          <td><input type="text" id="realname" name="realname" /></td>
        </tr>
        <tr>
          <td>
            登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):
          </td>
          <td><input type="text" id="username" name="username" /></td>
        </tr>
        <tr>
          <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
          <td><input type="password" id="psw" name="psw" /></td>
        </tr>
        <tr>
          <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
          <td><input type="password" id="psw2" name="psw2" /></td>
        </tr>
        <tr>
          <td>性别(必选其一)</td>
          <td>
            <input
              type="radio"
              id="gender_male"
              value="m"
              name="gender"
            />&nbsp;男&nbsp;&nbsp;
            <input
              type="radio"
              id="gender_female"
              value="f"
              name="gender"
            />&nbsp;女
            <label for="gender" class="error" style="display: none"
              >请选择性别</label
            >
          </td>
        </tr>
        <tr>
          <td>年龄(必填26-50):</td>
          <td><input type="text" id="age" name="age" /></td>
        </tr>

        <tr>
          <td>你的学历:</td>
          <td>
            <select name="edu" id="edu">
              <option value="">－请选择你的学历－</option>
              <option value="a">专科</option>
              <option value="b">本科</option>
              <option value="c">研究生</option>
              <option value="e">硕士</option>
              <option value="d">博士</option>
            </select>
          </td>
        </tr>

        <tr>
          <td>出生日期(1982/09/21):</td>
          <td><input type="text" id="birthday" name="birthday" value="" /></td>
        </tr>

        <tr>
          <td>兴趣爱好:</td>
          <td colspan="2">
            <input type="checkbox" name="checkbox1" id="qq1" />&nbsp;乒乓球
            &nbsp;
            <input
              type="checkbox"
              name="checkbox1"
              id="qq2"
              value="1"
            />&nbsp;羽毛球 &nbsp;
            <input
              type="checkbox"
              name="checkbox1"
              id="qq3"
              value="2"
            />&nbsp;上网 &nbsp;
            <input
              type="checkbox"
              name="checkbox1"
              id="qq4"
              value="3"
            />&nbsp;旅游 &nbsp;
            <input
              type="checkbox"
              name="checkbox1"
              id="qq5"
              value="4"
            />&nbsp;购物 &nbsp;
          </td>
        </tr>
        <tr>
          <td align="left">电子邮箱:</td>
          <td><input type="text" id="email" name="email" /></td>
        </tr>
        <tr>
          <td align="left">身份证(15-18):</td>
          <td><input type="text" id="card" name="card" /></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="submit" name="firstname" id="firstname" value="保存" />
          </td>
        </tr>
      </table>
    </form>

    <script src="jquery/jquery-3.6.1.js"></script>
    <script src="jquery/plugns/jquery.validate.js"></script>
    <script>
      // 自定义规则
      $.validator.addMethod(
        "cardId",
        function (value, element, params) {
          let regExp = /^\d{17}[\d|x]|\d{15}$/i;

          if (regExp.test(value)) {
            return true;
          }
          return false;
        },
        "身份证号码错误"
      );

      $("#empForm").validate({
        // 校验规则
        rules: {
          /*
             key : value
                key 表示表单元素的 name 值
                value: 对应表单元素的校验规则
            */
          realname: "required",
          username: {
            required: true,
            minlength: 6,
            maxlength: 20,
          },
          psw: {
            required: true,
            minlength: 6,
            maxlength: 20,
          },
          psw2: {
            equalTo: "#psw",
          },
          card: "cardId",
        },
        // 错误信息
        messages: {
          realname: "真实姓名必填",
          username: {
            required: "用户名必填",
            minlength: "最少 6 位",
            maxlength: "最多 20 位",
          },
        },
      });

      //   empForm.onsubmit = function () {
      //     console.log($("#empForm").validate());
      //     return false;
      //   };
    </script>

    <script>
      // 获取到表单  根据表单 name/id 属性获取到表单对象，然后 .输入框name/id
      //   console.log(empForm);
      //   console.log(document.querySelector("#empForm"));

      //   console.log(empForm.realname);

      //   empForm.onsubmit = function () {
      //     // 表单校验

      //     // 真实姓名
      //     if (empForm.realname.value == "" || empForm.realname.value.length < 2)
      //       return false;
      //     else if (empForm.gender.value == "") {
      //       // 实际操作
      //       let label = empForm.gender[0].parentElement.querySelector("label");
      //       label.style.display = "inline-block";
      //     }
      //     return false;
      //   };

      //   let ymq = document.querySelector("#qq2");

      //   if (ymq.parentNode.firstChild instanceof Text) {
      //     console.log(ymq.parentNode.firstChild.nextSibling);
      //   }
    </script>
  </body>
</html>
